<template>
    <div class="createOrder">
        <div class="title">{{ title}}</div>
        <div class="formArea">
            <el-form :model="createForm" :rules="rules" ref="createForm" label-width="80px" size="mini">
                <!-- 动态表单项 -->
                <el-form-item
                    v-for='(item, i) in customFiledList'
                    :key="i" 
                    :label='item.attribute'
                >
                    <formLibrary :formItem='item' @formItemHandle='formItemHandle' :defaultData="defaultData" ref='formLibrary'></formLibrary>
                </el-form-item>

                <!-- 固定项 -->
                <el-form-item label="工资单价(元)" prop="unitPrice">
                    <el-input-number v-model="createForm.unitPrice" controls-position="right" :min="0" placeholder="请填写" :max="9999999999.999998">
                    </el-input-number>
                </el-form-item>
                
                <el-form-item label="标准效率" class='efficiency' >
                    <el-form-item label=' '>
                        <el-input-number v-model="createForm.output" controls-position="right" :min="0" placeholder="单位时间产出" class='unitOut'
                            @change='iptNumberChange(1)'
                        >
                        </el-input-number>/
                    </el-form-item>
                    <el-form-item label=' '>
                        <el-input-number v-model="createForm.hour" controls-position="right" :min="0" class='unitOut'
                            @change='iptNumberChange(2)'
                        >
                        </el-input-number>小时
                    </el-form-item>
                    <el-form-item label=' '>
                        <el-input-number v-model="createForm.minute" controls-position="right" :min="0" class='unitOut'
                            @change='iptNumberChange(3)'
                        >
                        </el-input-number>分钟
                    </el-form-item>
                    <el-form-item label=' '>
                        <el-input-number v-model="createForm.second" controls-position="right" :min="0" class='unitOut'
                            @change='iptNumberChange(4)'
                        >
                        </el-input-number>秒
                    </el-form-item>
                </el-form-item>
                <div class='tip' v-show='tip'>{{ tipContent }}</div>
               
            </el-form>
        </div>
        <div class="btn">
            <el-button type="primary" plain size="small" @click="$router.push('/basicData/meritPay')">取消
            </el-button>
            <el-button type="primary" size="small" @click="save">保存</el-button>
        </div>
    </div>
</template>

<script>
    import {
        pOther,
        processOther,
        wagesHandle,
        respShow,
        wagesDetail,
        productList
    } from '@/api/baseController'
    import formLibrary from '@/components/formLibrary'
    export default {
        data() {
            var validateGZDJ = (rule, value, callback) => {
                if(value == 0) {
                    return callback(new Error('工资单价必须大于0'));
                } else {
                    callback()
                }
            }
            return {
                title: '新增绩效工资配置',
                createForm: {
                    unitPrice: '',
                    output: '',
                    hour: '',
                    minute: '',
                    second: ''
                },
                rules: {
                    unitPrice: [
                        { validator: validateGZDJ, trigger: 'change' },
                        { required: true, message: '工资单价 不能为空!'}
                    ]
                },
                unitIsShow: false,
                addUintName: '',
                disabled: false,
                tip: false,
                tipContent: '',
                customFiledList: [], // 表单项列表
                defaultData: [], // 表单值
                id: ''
            }
        },
        components: {
            formLibrary
        },
        mounted() {
            this.getRespShow()
        },
        methods: {
            // 接口============================
            // 初始表单项列表
            getRespShow() {
                this.defaultData = []
                respShow().then(res => {
                    if(res.code == 200 && res.data) {
                        this.customFiledList = res.data
                        this.getWagesDetail({ id: this.$route.query.id })
                        this.customFiledList.map(item => {
                            if(item.cusField == Number(item.cusField)) {
                                item.attribute = item.customFieldMess.chineseName
                            }
                        })
                    }
                })
            },
            // 详情
            getWagesDetail(data) {
                wagesDetail(data).then(res => {
                    let keys = [
                        'createId','createName','createTime','output','estimateWage','hour','minute',
                        'second','unitPrice','updateTime','workingHours', 'other'
                    ]
                    if(res.code == 200) {
                        this.id = res.data.id
                        this.$set(this.createForm, 'unitPrice', res.data.unitPrice)
                        this.$set(this.createForm, 'output', res.data.output)
                        for(let key in res.data) {
                            if(keys.indexOf(key) == -1 && res.data[key] != null) {
                                this.$set(this.createForm, key, res.data[key])
                                this.defaultData.push({
                                    customFieldId: key,
                                    value: res.data[key]
                                })
                            }
                        }
                        if(res.data.map != null) {
                            for(let key in res.data.map) {
                                this.$set(this.createForm, key, res.data.map[key])
                                this.defaultData.push({
                                    customFieldId: key,
                                    value: res.data.map[key]
                                })
                            }
                        }
                        if(res.data.workingHours) {
                            let str = res.data.workingHours
                            let hour = str.substring(0, str.indexOf('时')-1)
                            let time = str.substring(str.indexOf('时')+1, str.length-1).split('分钟')
                            this.$set(this.createForm, 'hour', hour)
                            this.$set(this.createForm, 'minute', time[0])
                            this.$set(this.createForm, 'second', time[1])
                        } else {
                            this.$set(this.createForm, 'hour', undefined)
                            this.$set(this.createForm, 'minute', undefined)
                            this.$set(this.createForm, 'second', undefined)
                            this.$set(this.createForm, 'output', undefined)
                        }
                    }
                })
            },
            // 编辑成功
            getWagesHandle(data) {
                wagesHandle(data).then(res => {
                    if(res.code == 200) {
                        this.$router.push('/basicData/meritPay')
                    }
                })
            },

            // 事件============================
            //保存
            save() {
                this.$refs.createForm.validate((valid) => {
                    if (valid && !this.tip) {
                        let data = {
                            unitPrice: this.createForm.unitPrice,
                        }
                        for(let key in this.createForm) {
                            if(
                                (this.createForm[key] || this.createForm[key] === 0) &&
                                (key != 'minute' && key != 'second' && key != 'hour' && key != 'map')
                            ) {
                                data[key] = this.createForm[key]
                            }
                        }
                        data.workingHours = 
                            (this.createForm.hour == undefined ? 0 : this.createForm.hour) + '小时' + 
                            (this.createForm.minute == undefined ? 0 : this.createForm.minute) + '分钟' + 
                            (this.createForm.second == undefined ? 0 : this.createForm.second) + '秒'
                        if(this.createForm.hour == undefined && this.createForm.minute == undefined && this.createForm.second == undefined) {
                            data.workingHours = ''
                        }
                        let obj = {
                            map: {}
                        }
                        for(let key in data) {
                            if((key === 'unitPrice' || key === 'output' || key ==='workingHours') && data[key] !== '') {
                                obj[key] = data[key]
                            } else if(key != 'id' && data[key] !== '') {
                                obj.map[key] = data[key]
                            }
                        }
                        obj.id = data.id
                        this.getWagesHandle(obj)
                    } else {
                        return false;
                    }
                });
            },
            // 标准效率
            iptNumberChange(v) {
                this.tip = false
                if(v == 1) {
                    if(this.createForm.output > 0) {
                        if(
                            typeof(this.createForm.hour) == 'undefined' &&
                            typeof(this.createForm.minute) == 'undefined' &&
                            typeof(this.createForm.second) == 'undefined'
                        ) {
                            this.createForm.hour = '1'
                        }
                        if(
                            !(this.createForm.hour >= 1) &&
                            !(this.createForm.minute >= 1) &&
                            !(this.createForm.second >= 1)
                        ) {
                            this.tipContent = '标准工时不能为0'
                            this.tip = true
                        }
                    }
                    if(
                        !this.createForm.output &&
                        (typeof(this.createForm.hour) != 'undefined' ||
                        typeof(this.createForm.minute) != 'undefined' ||
                        typeof(this.createForm.second) != 'undefined')
                    ) {
                        this.tipContent = '标准效率需要产出和时间信息，如无需配置效率，请清空该行的输入。'
                        this.tip = true
                    }
                }
                if(v != 1) {
                    if(
                        this.createForm.output == 0 &&
                        (typeof(this.createForm.hour) != 'undefined' ||
                        typeof(this.createForm.minute) != 'undefined' ||
                        typeof(this.createForm.second) != 'undefined')
                    ) {
                        this.tipContent = '标准效率需要产出和时间信息，如无需配置效率，请清空该行的输入。'
                        this.tip = true
                    }
                    if(
                        !(this.createForm.hour >= 1) &&
                        !(this.createForm.minute >= 1) &&
                        !(this.createForm.second >= 1)
                    ) {
                        this.tipContent = '标准工时不能为0'
                        this.tip = true
                    }
                    if(typeof(this.createForm.output) == 'undefined') {
                        this.$set(this.createForm, 'output', 1)
                    }
                }
            },

            // 组件关联事件
            formItemHandle(d) {
                if(d.value == '计时') {
                    d.value = 1
                }
                if(d.value == '计件') {
                    d.value = 0
                }
                if(d.name == 'productName' || d.name == 'productCode') {
                    productList({limit: 1000, page: 1}).then(res => {
                        if(res.code == 200) {
                            if(d.name == 'productName') {
                                this.productLinkage(res, d, 'productName', 'productCode', 'code')
                            }
                            if(d.name == 'productCode') {
                                this.productLinkage(res, d, 'productCode', 'productName', 'name')
                            }
                        }
                    })
                }
                this.$set(this.createForm, d.name, d.value)
                this.defaultData = []
                for(let key in this.createForm) {
                    if(key !== 'hour' && key !== 'minute' && key !== 'output' && key !== 'second' && key !== 'unitPrice') {
                        this.defaultData.push({
                            customFieldId: key,
                            value: this.createForm[key]
                        })
                    }
                }
            },
            // 产品编号-名称联动
            productLinkage(res, d, p1, p2, t) {
                let sData = []
                let str = t == 'code' ? 'name' : 'code'
                if(d.value !== '') {
                    res.data.records.map(item => {
                        if(item[str] == d.value) {
                            sData.push(item[t])
                        }
                    })
                } else {
                    res.data.records.map(item => {
                        sData.push(item[t])
                    })
                }
                if(sData.length == 1) {
                    this.$set(this.createForm, p2, sData[0])
                }
                this.customFiledList.map(item => {
                    if(item.cusField == p2) {
                        item.list = Array.from(new Set(sData))
                    }
                })
                let nameInd = this.defaultData.findIndex(item => { return item.customFieldId == p1 })
                nameInd == -1 ? nameInd = 0 : ''
                this.$set(this.defaultData, nameInd, { customFieldId: p1, value: d.value })
                let codeInd = this.defaultData.findIndex(item => { return item.customFieldId == p2 })
                if(d.value !== '') {
                    if(codeInd == -1 && sData.length == 1) {
                        this.defaultData.push({
                            customFieldId: p2,
                            value: sData[0]
                        })
                    } else if(codeInd != -1 && sData.length == 1) {
                        this.$set(this.defaultData, codeInd, { customFieldId: p2, value: sData[0] })
                    } else if(codeInd != -1 && sData.length > 1) {
                        this.$set(this.defaultData, codeInd, { customFieldId: p2, value: '' })
                    }
                }
            },

            dataHandle(d, n) {
                
            },
        }
    }
</script>

<style lang="less" scoped>
    .createOrder {
        overflow: auto;
        .title {
            font-size: 16px;
            padding: 20px 0 20px 20px;
        }
        .formArea {
            width: 420px;
            padding: 0px 0px 0px 60px;
            .tip {
                width: 200%;
                position: absolute;
                bottom: -8px;
                color: #f56c6c;
                font-size: 12px;
                left: 80px;
            }
            .efficiency {
                width: 200%;
                /deep/ .el-form-item__content {
                    display: flex;
                    .el-form-item {
                        .el-form-item__label {
                            width: 0 !important;
                        }
                        .el-form-item__content {
                            margin-left: 5px !important;
                        }
                    }
                    .el-input-number {
                        width: 63px;
                        margin: 0 10px 0 10px;
                    }
                    .unitOut {
                        width: 100px;
                        margin-left: 0;
                    }
                }
            }
        }

        .productTask {
            margin: 60px 40px 0px;

            .operate {
                span {
                    font-size: 12px;
                    float: left;
                }

                .operate_btn {
                    float: right;
                }

                margin-bottom: 10px;
            }

            .btn {
                margin: 26px 0;
                text-align: center;

                /deep/ .el-button--primary span {
                    margin-left: 0;
                }
            }
        }

        .btn {
            margin: 0 0 20px 60px;
            text-align: center;
            display: inline-block;
            width: 420px;

            /deep/ .is-plain {
                margin-right: 10px;
            }

            /deep/ .el-button--primary {
                width: 130px;
                span {
                    margin-left: 0;
                }
            }
        }
        /deep/ .el-form {
            position: relative;
        }

        /deep/ .el-input-number--mini {
            width: 100%;
        }

        /deep/ .el-autocomplete {
            width: 100%;
        }

        /deep/ .el-range-editor--mini.el-input__inner {
            width: 100%;
        }

        /deep/ .el-table__empty-text {
            .el-empty {
                padding: 0;
            }
        }

        /deep/ .el-empty__image {
            height: 60px;
        }

        /deep/ .el-empty__image svg {
            vertical-align: text-top;
        }

        /deep/ .el-empty__description {
            margin-top: 10px;
        }

        /deep/ .el-range-editor.el-input__inner {
            width: 100%;
        }

        /deep/ .el-range-editor .el-range-input {
            flex: 7;
        }

        /deep/ .el-date-editor .el-range-separator {
            flex: 1;
        }

        /deep/ .el-input-group__append {
            background-color: #02b980;
            color: white;
        }
        /deep/ .el-input__inner {
            text-align: left;
        }
        /deep/ .el-select {
            width: 100%;
        }
    }
</style>